ngIF постоянно работает в Ionic4

Question

Я разрабатываю приложение для чата с функциональностью Chat Group. Я создал страницы «Создать новую группу» и «Изменить существующую группу». На моей странице «Редактировать группу» я загружаю все списки пользователей и проверяю участников, присутствуют ли они в группе, чтобы обеспечить возможность добавления или удаления как существующего, так и нового участника. Мой код выглядит так:

edit-group.page. html

Обратите внимание на состояние *ngIf в ионной кнопке.

Этот *ngIf проверяет, является ли друг уже членом группы, с помощью функции inGroup(), а также проверяет, является ли друг администратором с помощью функции checkadmin().

Мои функции следующие:

edit-group.page.ts

inGroup(friend) {
    //Currently this.groupMembers.lenth is 3 but this function is called 150 times as I have 150 users
    for (var i = 0; i < this.groupMembers.length; i++) {  
      console.log("Kartik In Group Count: " + i);
      if (this.groupMembers[i].$key == friend.$key) {
        return true;
      }
    }
    return false;
  }

  checkadmin() {
    if (this.group.admin == this.afAuth.auth.currentUser.uid) {
      return true;
    } else {
      return false;
    }
  }

Итак, у меня есть всего 150 пользователей, которые перебирают *ngFor="let friend of friends" в моем ion-элементе в html. и для каждого друга проверяются функции inGroup(friend) и checkadmin().

Теперь мое приложение всегда будет иметь значение l oop, как только страница загрузится. Функции inGroup() и checkAdmin() продолжают циклически проходить через *ngIf. Есть идеи, что я тут делаю не так ????

Answer 1

Лучше избегать использования методов в *ngIf, поскольку переменная не будет иметь каких-либо проблем с производительностью, поскольку она напрямую проверяется по переменной, в то время как метод будет использовать обнаружение изменений, и он будет срабатывать много раз.

Поэтому попробуйте создать некоторую переменную после получения данных из вашего ответа, например isAdmin:

<ion-button fill="clear" slot="end" color = "light" 
    (click)="removeFromGroup(friend); $event.stopPropagation()" 
    *ngIf="friend?.isAdmin">
    <ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>

Answer 2

Если у вас нет ошибок консоли в браузере и у вас есть доступные данные, я не могу точно сказать, что не так.

Но я бы использовал *ngIf else для рендеринга HTML и обновите мой код, как показано ниже:

 <ion-button fill="clear" slot="end" color = "light" (click)="removeFromGroup(friend); $event.stopPropagation()" *ngIf="inGroup(friend) && checkadmin(); else notInGroup">
        <ion-icon slot="icon-only" name="close"></ion-icon>
    </ion-button>

<ng-template #notInGroup
<ion-button fill="clear" slot="end" color = "light" (click)="addToGroup(friend); $event.stopPropagation()">
            <ion-icon slot="icon-only" name="add"></ion-icon>
        </ion-button>
</ng-template>

Также обновите ваш inGroup(friend), чтобы он был примерно таким, используя функцию loda sh или java script some:

inGroup(friend) {
    return _.some(this.groupMembers, (member) => member.$key === friend.$key);
}

И checkadmin может быть логическим набором в вашем OnInit и использоваться в *ngIf:

boolean isAdmin  = (this.group.admin === this.afAuth.auth.currentUser.uid)